<template>
	<view class="attendance">
		<map class="mapMask" :latitude="map.latitude" :longitude="map.longitude"  :markers="map.markers" :scale="map.scale"></map>
		<view class="attendDk">
			<view class="attend_search flex">
				<view class="color_ca">当前位置<text class="color_r mr20" style="margin-left: 10rpx;">*</text></view>
				<view style="width:460rpx;">{{createAddress}}</view>
				<!-- <image src="../../static/images/bg_07.png" mode=""></image> -->
			</view>
			<view class="attend_daka">
				<view class="atten_time">
					<view class="times">{{nowTime}}</view>
					<view class="years">{{years}}</view>
				</view>
				<view class="atten_check">
					<view class="atten_btn flex flex-between">
						<view class="btn1 flex align-center justify_center" @click="upWork">
							<image src="../../static/images/bg_11.png" mode=""></image>
							<text class="">上班打卡</text>
						</view>
						<view class="btn2 flex align-center justify_center"@click="downWork">
							<image src="../../static/images/bg_14.png" mode=""></image>
							<text class="">下班打卡</text>
						</view>
					</view>
				</view>
				<view class="atten-list">
					<view class="scraLine"></view>
					<view class="atten-right">
						<view class="atten flex">
							<view class="scrial"></view>
							<view class="">
								<view class="">上班:{{startTime.day?startTime.day:'暂无'}}</view>
								<view class="flex align-center smallWorld">
									<image src="../../static/images/bg_19.png" mode="" class="smallImag"></image>
									<text class="color_93 f12">{{startTime.year?startTime.year:'暂无'}}</text>
								</view>
							</view>
						</view>
						<view class="atten flex">
							<view class="scrial"></view>
							<view class="">
								<view class="">下班:{{endTime.day?endTime.day:'暂无'}}</view>
								<view class="flex align-center smallWorld">
									<image src="../../static/images/bg_19.png" mode="" class="smallImag"></image>
									<text class="color_93 f12">{{endTime.year?endTime.year:'暂无'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {getTimeNow,getYear,getState} from '../../common/getTimeqj.js'
	import {getAddCheck,getcheckList} from '../../util/api.js'
	export default {
		data() {
			return {
				createAddress:'',
				years:'',
				nowTime:'',
				utext:'',
				timer: null,
				subNvue:'',
				userInfor: uni.getStorageSync('userInfor'),
				startTime:{year:'',day:""},
				endTime:{year:'',day:""},
				timeState:'',
				map: {
					mapObj: {},
					latitude:34.230579,
					longitude:108.938228,
					scale: 13, // 默认16
					markers: [],
				},
			}
		},
		onLoad() {
			this.getTimeList();
			this.subNvue = uni.getSubNVueById('check');
			uni.$on('check',(e)=>{
				console.log('================'+e)
				this.clock(e)
				this.subNvue.hide('fade-out',300)
			})
		},
		onShow() {
			this.getTimeRe()
		},
		onUnload() {
			this.clear()
		},
		onHide() {
			this.clear()
		},
		mounted() {
			this.map.mapObj = uni.createMapContext("map", this);
			this.getLocation();
		},
		methods: {
			//清除定时器
			clear(){
				uni.$off('check')
				console.log('清除时间定时器')
				if(this.timer) {
					clearInterval(this.timer);  
					this.timer = null;  
				}  
			},
			//统计打卡记录
			getTimeList(){
				getcheckList({},this.userInfor.userId).then((res)=>{
					if(res.code == 200){
						if(res.data){
							if(res.data.startworktime!=null){
								var startworktime = res.data.startworktime.trim().split(' ');
								this.startTime.year = startworktime[0];
								this.startTime.day = startworktime[1]
							}
							if(res.data.endworktime!=null){
								var endworktime = res.data.endworktime.trim().split(' ');
								this.endTime.year = endworktime[0]
								this.endTime.day = endworktime[1]
							}
							if(res.data.type == 1){
								uni.$emit('startLocationTimer')
							}else if(res.data.type == 2){
								uni.$emit('killLocationTimer')
							}
						}else{
							this.timeState = 0
							console.log('空')
						}
					}else{
						this.timeState = 0
						this.$toast.showToast('获取统计失败')
					}
				}).catch((err)=>{})
			},
			//倒计时开启
			getTimeRe(){
				this.timer = setInterval(()=>{
					// console.log('11111')
					this.years = getYear();
					this.nowTime = getTimeNow();
				},1000)
			},
			 upWork(){
				if(this.map.longitude == ''||this.map.latitude == ''||this.createAddress==''){
					this.$toast.showToast('获取位置信息失败')
					return
				}
				uni.$emit("chackNew", {time:this.nowTime,name:1});
				this.subNvue.show('fade-in', 300, function() {})
			},
			downWork(){
				if(this.map.longitude == ''||this.map.latitude == ''||this.createAddress==''){
					this.$toast.showToast('获取位置信息失败')
					return
				}
				uni.$emit("chackNew", {time:this.nowTime,name:2});
				this.subNvue.show('fade-in', 300, function() {})
			},
			clock(type){
				var parme = {
					userId:this.userInfor.userId,
					address:this.createAddress,
					type:type,  //1 上班  2 下班
					gdx:this.map.longitude,  //108.937931
					gdy:this.map.latitude, //34.230561
				}
				console.log(parme);
				getAddCheck(parme).then((res)=>{
					if(res.code == 200){
						this.$toast.showToast('打卡成功')
						this.getTimeList()
					}else{
						this.$toast.showToast('打卡失败')
					}
				}).catch((err)=>{})
			},
			// 获取地理位置
			getLocation() {
				uni.showLoading()
				var that = this;
				// #ifdef APP-PLUS
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success(res) {
						uni.hideLoading()
						that.map.latitude = res.latitude;
						that.map.longitude = res.longitude;
						that.createAddress = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum + res.address.poiName;
						//添加mark
						that.map.markers.push({
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/static/images/uni-address.png',
							width: 80,
							height: 80
						})
					},
					fail: function () {
						uni.hideLoading()
						uni.showToast({
							title: '获取定位失败，请检查是否开启位置信息权限',
							icon:'none',
							duration: 4000
						});
					}
				});
				// #endif
				/* #ifdef H5 */
				that.map.markers.push({
					latitude: "34.230564",
					longitude: "108.938192",
					iconPath: '../../static/images/bg_03.png',
					width: 20,
					height:20,
				})
				console.log(that.map.markers)
				/* #endif */
				that.map.mapObj.moveToLocation();	//移动到当前定位地点
			},
		}
	}
</script>

<style scoped lang="scss">
	.smallImag{
		width:30rpx;
		height: 30rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
	}
.attendance{
	/* #ifdef H5 */
	width: 100%;
	/* #endif */
	.mapMask{
		width: 100%;
		height: 512rpx;
	}
	.attendDk{
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
		padding-bottom: 100rpx;
		.attend_search{
			margin: 20rpx 50rpx;
			padding: 20rpx 20rpx;
			font-size: 26rpx;
			border-radius: 20rpx;
			box-shadow: 0px 0px 10px #DFE2ED;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
		.attend_daka{
			border-radius: 20rpx;
			padding:0rpx 50rpx;
			margin: 20rpx 50rpx;
			box-shadow: 0px 0px 10px #DFE2ED;
			.atten_time{
				padding: 40rpx 0rpx;
				border-bottom: 1px solid #F1F1F1;
				.times{
					font-size: 60rpx;
				}
				.years{
					color: #3E3D42;
				}
			}
			.atten_check{
				margin-top: 40rpx;
				margin-bottom: 80rpx;
				.atten_btn{
					.btn1,.btn2{
						width: 260rpx;
						height: 92rpx;
						border-radius: 20rpx;
						color: #FFFFFF;
						box-shadow: 0px 2px 10px #478FF3;
						background-image: linear-gradient(to right, #478FF3, #609FF7);
						image{
							width: 35rpx;
							height: 35rpx;
							margin-right: 10rpx;
						}
					}
					.btn2{
						background: #F5F5F5;
						color: #878689;
						box-shadow: 0px 2px 10px #878689;
					}
				}
			}
			.atten-list{
				padding-bottom: 100rpx;
				position: relative;
				.scraLine{
					width: 2rpx;
					height: 80rpx;
					background-color: #A7A7A7;
					position: absolute;
					top: 45rpx;
					left: 28rpx;
				}
				.atten-right{
					.atten{
						margin: 10rpx 0rpx 50rpx 0rpx;
						.scrial{
							width: 20rpx;
							height: 20rpx;
							background-color: #7B7F8B;
							border-radius: 50%;
							margin: 10rpx 20rpx;
						}
					}
				}
			}
		}
	}
}
</style>
